<template>
    <div class="home">
        <el-container>
            <el-header>
                <p>课程管理系统</p>
                <p>admin</p>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu width="200px" router default-active="/user" class="el-menu-vertical-demo"
                        background-color="#324157" text-color="#fff" active-text-color="#2682C9">
                        <el-menu-item index="/user">
                            <i class="el-icon-menu"></i>
                            <span slot="title">管理员首页</span>
                        </el-menu-item>
                        <el-menu-item index="/permission">
                            <i class="el-icon-setting"></i>
                            <span slot="title">系管理</span>
                        </el-menu-item>
                        <el-menu-item index="/goods">
                            <i class="el-icon-setting"></i>
                            <span slot="title">专业管理</span>
                        </el-menu-item>
                        <el-menu-item index="/order">
                            <i class="el-icon-setting"></i>
                            <span slot="title">班级管理</span>
                        </el-menu-item>
                        <el-menu-item index="/system">
                            <i class="el-icon-setting"></i>
                            <span slot="title">学生管理</span>
                        </el-menu-item>
                        <el-menu-item index="/system">
                            <i class="el-icon-setting"></i>
                            <span slot="title">教师管理</span>
                        </el-menu-item>
                        <el-menu-item index="/system">
                            <i class="el-icon-setting"></i>
                            <span slot="title">课程管理</span>
                        </el-menu-item>
                        <el-menu-item index="/system">
                            <i class="el-icon-setting"></i>
                            <span slot="title">选课修改</span>
                        </el-menu-item>
                        <el-menu-item index="/system">
                            <i class="el-icon-setting"></i>
                            <span slot="title">管理员管理</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                </el-container>
                    <div class="toolbar">
                        <div class="toolbar-left">
                            <el-button type="primary" @click="handleAdd">
                                <i class="el-icon-plus"></i>
                                创建
                            </el-button>
                        </div>

                        <div class="toolbar-right">
                            <el-input v-model="searchText" placeholder="系名" class="search-input" clearable
                                @clear="handleClearSearch">
                            </el-input>
                            <el-button type="primary" @click="handleSearch">搜索</el-button>
                        </div>
                    </div>
             </el-container>
                    <!-- 数据表格 -->
        <div class="table-container">
            <el-table :data="paginatedData" style="width: 100%" class="data-table">
                <el-table-column prop="id" label="系id" width="100" />
                <el-table-column prop="name" label="系名" />
                <el-table-column prop="majorCount" label="专业数" width="120" />
                <el-table-column prop="teacherCount" label="教师数" width="120" />
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button size="small" type="success" @click="handleEdit(scope.row)">
                            编辑
                        </el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页 -->
        <div class="pagination-container">
            <el-pagination :current-page.sync="currentPage" :page-size="pageSize" :total="filteredTableData.length"
                layout="prev, pager, next" @current-change="handlePageChange" />
        </div>

        <!-- 添加/编辑对话框 -->
        <el-dialog :visible.sync="dialogVisible" :title="dialogTitle" width="500px">
            <el-form :model="formData" label-width="80px">
                <el-form-item label="系名">
                    <el-input v-model="formData.name" placeholder="请输入系名" />
                </el-form-item>
                <el-form-item label="专业数">
                    <el-input-number v-model="formData.majorCount" :min="0" />
                </el-form-item>
                <el-form-item label="教师数">
                    <el-input-number v-model="formData.teacherCount" :min="0" />
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleSubmit">确定</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>
export default {
    data() {
        return {
            searchText: '',
            currentPage: 1,
            pageSize: 5,
            dialogVisible: false,
            dialogTitle: '添加系',
            isEditing: false,
            tableData: [
                { id: 44, name: '演示系20', majorCount: 0, teacherCount: 0 },
                { id: 43, name: '演示系19', majorCount: 0, teacherCount: 0 },
                { id: 42, name: '演示系18', majorCount: 0, teacherCount: 0 },
                { id: 41, name: '演示系17', majorCount: 0, teacherCount: 0 },
                { id: 40, name: '演示系16', majorCount: 0, teacherCount: 0 },
                { id: 39, name: '演示系15', majorCount: 0, teacherCount: 0 },
                { id: 38, name: '演示系14', majorCount: 0, teacherCount: 0 },
                { id: 37, name: '演示系13', majorCount: 0, teacherCount: 0 }
            ],
            formData: {
                id: null,
                name: '',
                majorCount: 0,
                teacherCount: 0
            },
            searchResult: null // 新增：存储搜索结果
        }
    },
    computed: {
        filteredTableData() {
            // 如果有搜索结果就显示搜索结果，否则显示全部数据
            return this.searchResult !== null ? this.searchResult : this.tableData
        },
        paginatedData() {
            const start = (this.currentPage - 1) * this.pageSize
            const end = start + this.pageSize
            return this.filteredTableData.slice(start, end)
        }
    },
    methods: {
        handleAdd() {
            this.dialogTitle = '添加系'
            this.isEditing = false
            this.formData = {
                id: null,
                name: '',
                majorCount: 0,
                teacherCount: 0
            }
            this.dialogVisible = true
        },
        handleEdit(row) {
            this.dialogTitle = '编辑系'
            this.isEditing = true
            this.formData = { ...row }
            this.dialogVisible = true
        },
        handleDelete(row) {
            this.$confirm(`确定要删除 "${row.name}" 吗？`, '确认删除', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const index = this.tableData.findIndex(item => item.id === row.id)
                if (index > -1) {
                    this.tableData.splice(index, 1)
                    // 如果当前有搜索结果，也需要从搜索结果中删除
                    if (this.searchResult !== null) {
                        const searchIndex = this.searchResult.findIndex(item => item.id === row.id)
                        if (searchIndex > -1) {
                            this.searchResult.splice(searchIndex, 1)
                        }
                    }
                    this.$message.success('删除成功')
                }
            }).catch(() => {
                this.$message.info('已取消删除')
            })
        },
        handleSubmit() {
            if (!this.formData.name.trim()) {
                this.$message.warning('请输入系名')
                return
            }

            if (this.isEditing) {
                // 编辑
                const index = this.tableData.findIndex(item => item.id === this.formData.id)
                if (index > -1) {
                    this.tableData[index] = { ...this.formData }
                    // 如果当前有搜索结果，也需要更新搜索结果
                    if (this.searchResult !== null) {
                        const searchIndex = this.searchResult.findIndex(item => item.id === this.formData.id)
                        if (searchIndex > -1) {
                            this.searchResult[searchIndex] = { ...this.formData }
                        }
                    }
                    this.$message.success('编辑成功')
                }
            } else {
                // 添加
                const newId = this.tableData.length > 0
                    ? Math.max(...this.tableData.map(item => item.id)) + 1
                    : 1
                const newItem = {
                    ...this.formData,
                    id: newId
                }
                this.tableData.unshift(newItem)
                // 如果当前有搜索结果，且新项符合搜索条件，也需要添加到搜索结果
                if (this.searchResult !== null &&
                    newItem.name.toLowerCase().includes(this.searchText.toLowerCase())) {
                    this.searchResult.unshift(newItem)
                }
                this.$message.success('添加成功')
            }

            this.dialogVisible = false
        },
        handleSearch() {
            if (!this.searchText.trim()) {
                this.searchResult = null // 清空搜索条件
                this.$message.warning('请输入搜索内容')
                return
            }

            // 执行搜索
            this.searchResult = this.tableData.filter(item =>
                item.name.toLowerCase().includes(this.searchText.toLowerCase())
            )

            this.currentPage = 1 // 重置到第一页
            this.$message.success(`找到${this.searchResult.length}条结果`)
        },
        handleClearSearch() {
            this.searchResult = null // 清空搜索结果
            this.currentPage = 1 // 重置到第一页
        },
        handlePageChange(page) {
            this.currentPage = page
        }
    }
}
</script>


<style scoped>
.main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: white;
}

.page-header {
    padding: 20px 24px 0;
    background: white;
}

.page-title {
    font-size: 20px;
    color: #303133;
    margin: 0;
    font-weight: 500;
}

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: white;
    border-bottom: 1px solid #ebeef5;
}

.toolbar-left {
    display: flex;
    gap: 10px;
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.search-input {
    width: 200px;
}

.table-container {
    flex: 1;
    padding: 0 24px;
    overflow-y: auto;
}

.data-table {
    margin-top: 20px;
}

:deep(.data-table .el-table__header-wrapper) {
    background: #fafafa;
}

:deep(.data-table .el-table__header th) {
    background: #fafafa;
    color: #606266;
    font-weight: 500;
}

.pagination-container {
    display: flex;
    justify-content: center;
    padding: 20px;
    background: white;
    border-top: 1px solid #ebeef5;
}

:deep(.el-pagination) {
    justify-content: center;
}
</style>